<template>
  <div class="efficiency-container">
    <bsc-subtitle :subtitle="title" />
    <EffChart class="chart" :x-label="xLabel" :jdata="jdata" :qdata="qdata" />
    <bsc-subtitle :subtitle="'装车效率'" class="subtitle" />
    <!-- <EffHj :indicators="indicators" class="hj-container" /> -->
    <EffZcChart class="chart zcchart" :x-label="xLabel" :jdata="jdata" :qdata="qdata" />

  </div>
</template>

<script>
import BscSubtitle from "./subtitle.vue";
import EffChart from "./eff-chart.vue";
import EffZcChart from "./eff-zc-chart.vue";
export default {
  name: "EfficiencyCard",
  components: {
    BscSubtitle,
    EffChart,
    EffZcChart
  },
  props: {
    title: {
      type: String,
      required: true,
      default: "默认标题",
    },
  },
  data() {
    return {
      xLabel: [],
      jdata: [],
      qdata: [],
      indicators: [],
    };
  },
  mounted() {
    setTimeout(() => {
      this.xLabel = ["一月", "二月", "三月", "四月", "五月", "六月"];
      this.jdata = ["40", "60", "22", "85", "50", "40"];
      this.qdata = ["20", "50", "12", "65", "30", "60"];
      console.log(2);
      this.indicators = [
        {
          label: "COD",
          value: "30",
        },
        {
          label: "PM2.5",
          value: "0.03",
        },
        {
          label: "PM10",
          value: "0.05",
        },
        {
          label: "湿度",
          value: "22",
        },
        {
          label: "温度",
          value: "30",
        },
      ];
    }, 2000);
  },
};
</script>

<style scoped lang="scss">
.efficiency-container {
  width: 100%;
  height: 100%;
  position: relative;
  color: #fff;
  background: url("~@/assets/images/qyjj.png") left center / 100% 100% no-repeat;
  .chart {
    width: 100%;
    height: 40%;
    margin: 0 auto;
    margin-top: 60px;
  }
  .zcchart{
    margin-top: 10px ;
  }
  .subtitle {
    top: 52%;
  }
  .efficiency-title {
    position: absolute;
    top: 5px;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    text-align: center;
    text-shadow: rgb(0, 117, 255) 0px 0px 8px;
    padding: 0px;
  }
  .hj-container{
    width: 90%;
    margin: 0 auto;
    margin-top: 18px;
    height: 40%;
  }
}
</style>
